<template>
    <div class="seleConutry">
        <x-header>
            <div slot="default" class="common__header--title">选择职业</div>
            <div @click="closeSele()" slot="overwrite-left" class="common__header--img">
                <img slot="icon" src="~assets/x3/ico/close1.png" class="go-back">
            </div>
            <div @click="setSele()" slot="right" class="common__header--title">确认</div>
        </x-header>
        <tab v-model="occuType">
            <tab-item>职业大类</tab-item>
            <tab-item>{{ocName}}</tab-item>
            <tab-item>{{ocNameSub}}</tab-item>
        </tab>
        <picker v-show="isSeleOne" :data='occupationSeleOne' v-model='occupation' @on-change='change'></picker>
        <picker v-show="!isSeleOne && !isSeleThe" @on-change='changeSub' :data='occupationSeleSub' v-model='occupationSub'></picker>
        <picker v-show="isSeleThe" :data='occupationSeleThe' v-model='occupationThe'></picker>
    </div>
</template>



<script>
import { Cell, Group, XHeader, Picker, GroupTitle, XButton, Checker, CheckerItem, Scroller, Tab, TabItem } from 'vux'
import { RequestUrl } from "src/common/url";
import { mapState, mapActions } from "vuex";
import {
    Mutations
} from "src/common/const";
export default {
    components: {
        Picker,
        GroupTitle,
        XButton,
        Cell,
        Group,
        XHeader,
        Checker,
        CheckerItem,
        Scroller,
        Tab,
        TabItem
    },
    computed: mapState({
        // insure: "insure",
        isLoading: "isLoading",
        user: "user",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        indexSeleCountry: "seleCountry",
        isWeChar: "isWeChar",
        showSeleCountry: "showSeleCountry",
        seleValue: "seleValue"
    }),
    methods: {
        changeSub(val) {
            let valSt = val + "";
            if (valSt != "") {
                let data = valSt.split(":");
                let code = data[0];
                this.seleCodeSub = code;
                let name = data[1];
                this.ocNameSub = name;
                // if (!this.seleValue.isOccpaQuery) {

                if (this.isMove && !this.seleValue.isOccpaQuery) {
                    this.occuType = 2;
                }
                // }
            }
        },
        change(val) {
            let _this = this;
            let valSt = val + "";
            if (valSt != "") {
                let data = valSt.split(":");
                let code = data[0];
                this.seleCode = code;
                let name = data[1];
                this.ocName = name;
                if (!this.seleValue.isOccpaQuery) {
                    this.occuType = 1;
                    this.isMove = false;
                    setTimeout(function () {
                        _this.isMove = true;
                    }, 400);
                }
            }
        },
        closeSele() {
            this.$emit('closeOccupation');
        },
        queryData(level, codeCode) {
            let classlevelMax = "";
            let classlevelMin = "";
            let type = false;
            if (this.saveInsure.eleShow.occupation) {
                let limitTerm = JSON.parse(this.detailsStore.curSelePlan.limitTerm);
                classlevelMax = limitTerm.classlevelMax;
                classlevelMin = limitTerm.classlevelMin;
                type = false;
                // let query = { _this: this, level: level, codeCode: codeCode, levelMax: limitTerm.classlevelMax, levelMin: limitTerm.classlevelMin };
                // this.$common.storeCommit(this, Mutations.OCCUPATION_GET, query);
            } else if (this.saveInsure.eleShow.occupationLimit) {
                type = true;
                if (codeCode == "") {
                    codeCode = 1;
                }
                classlevelMax = 0;
                classlevelMin = 0;
            }

            if (this.saveInsure.eleShow.occupation || this.saveInsure.eleShow.occupationLimit) {
                let query = { _this: this, level: level, codeCode: codeCode, levelMax: classlevelMax, levelMin: classlevelMin, type: type };
                this.$common.storeCommit(this, Mutations.OCCUPATION_GET, query);
            }

        },
        setSele() {
            this.$common.storeCommit(this, Mutations.SET_INSURE_OCCUPATION_VALUE, this.occupationThe);
            this.$emit('closeOccupation')

        }

    },
    watch: {
        occuType(cur, old) {
            if (cur == 1) {
                this.isSeleOne = false;
                this.isSeleThe = false;
                this.queryData("2", this.seleCode);
            } else if (cur == 2) {
                this.isSeleOne = false;
                this.isSeleThe = true;
                this.queryData("3", this.seleCodeSub);
            } else {
                this.isSeleOne = true;
                this.isSeleThe = false;
            }
        }

    },
    data() {
        return {
            occuType: 0,
            occupationSeleOne: [[{ name: "", value: "" }, { name: "", value: "" }, { name: "", value: "" }, { name: "", value: "" }, { name: "", value: "" },]],
            occupation: [],
            seleCode: "",
            seleCodeSub: "",

            occupationSeleSub: [[{ name: "", value: "" }, { name: "", value: "" }, { name: "", value: "" }, { name: "", value: "" }, { name: "", value: "" },]],
            occupationSub: [],
            ocNameSub: "       ",

            occupationSeleThe: [[{ name: "", value: "" }, { name: "", value: "" }, { name: "", value: "" }, { name: "", value: "" }, { name: "", value: "" },]],
            occupationThe: [],

            ocName: "        ",
            isSeleOne: true,
            isSeleThe: false,
            isMove: true,
        }
    },
    mounted() {
        this.queryData("1", "");
        this.$init.subPageInit(this);




    }
}
</script>


<style lang="scss" >
.seleCountry__group {
  margin-top: -10px;
  box-shadow: 0px 0px 5px 1px #777777;
}

.details__dialog--btnlist {
  padding: 10px 15px; // width: max-content;
  text-align: center;
}

.seleCou-item-selected {
  border: 2px solid #C8161D;
  border-radius: 3px;
  background: #ffffff url(~assets/x3/ico/close.png) no-repeat right top;
  margin-bottom: 5px;
}

.seleCou-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
  margin: 0px 3px;
  font-size: 14px;
  background: #ffffff url(~assets/x3/ico/close.png) no-repeat right top;
  margin-bottom: 5px;
}

.pinyinlist__navigation--right {
  position: fixed;
  top: 47px;
  right: 0px; // height: 100%;
  // width: 15px;
  padding-right: 10px;
  text-align: center;
  font-size: 12px;
  z-index: 99;
  background: rgba(145, 145, 145, 0);
}

.pinyinlist__navigation--right li img {
  width: 14px;
}

ul li {
  margin-bottom: -4px;
  list-style: none;
  a {
    color: #000;
  }
}

#pinyinlist__navigation--letter {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  font-size: 75px;
  color: #555;
  text-align: center;
  line-height: 100px;
  background: rgba(145, 145, 145, 0.6);
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -50px 0px 0px -50px;
  z-index: 99;
  display: none;
}

#pinyinlist__navigation--letter img {
  width: 50px;
  height: 50px;
  float: left;
  margin: 25px 0px 0px 25px;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>
